<template>
	<!-- 资产盘点结果 -->
	<view class="check-result">
		<view class="top-head" :style="{height:`${44+safeTop}px`,paddingTop:`${safeTop}px`}">
			<text class="iconfont icon-left-arrow" @click="goBack"></text>
			<text class="title">资产盘点</text>
			<text></text>
		</view>
		<view class="content">
			<view class="card" style="display: flex;justify-content: space-between;">
				<text>{{assetCheck.assetCheckName}}</text>
				<text>扫描结果</text>
			</view>
			<checkbox-group @change="checkboxChange">
					<uni-swipe-action>
						<uni-swipe-action-item v-for="(item,index) in resultData" :key="item.assetCheckDtlId">
							<view class="card" >
								<view class="head">
									<text>{{item.assetName}}({{item.assetNo}})</text>
									<text>{{item.statusCh}}</text>
								</view>
								<view class="list">
									<label>
										<checkbox :value="index" :checked="item.checked" />
									</label>
									<view>
										<view>盘点方式：{{item.checkTypeCh}}</view>
										<view>扫码时间：2022-06-06 15:00:00</view>
									</view>
								</view>
							</view>
							<template v-slot:right>
								<view class="right-icon" @click="toDel(index)">
									<uni-icons type="trash" size="30" color='#fff'></uni-icons>
									<view>删除</view>
								</view>
							</template>
						</uni-swipe-action-item>
					</uni-swipe-action>
			</checkbox-group>
		</view>
		<view class="bottom-btn">
			<button type="default" @click="submitBtn"><text class="iconfont icon-jsontijiao">&nbsp;提交结果</text></button>
			<button type="default" @click="toJump"><text class="iconfont icon-saoyisao">&nbsp;继续扫码</text></button>
		</view>
		<MessageTip ref="messageTip" :tipContent="'确认删除吗？'" @clickType="handleShowOrHideTip"/>
	</view>
</template>
<script setup lang="ts">
	import {
		ref,
	} from "vue"
	import {
		onLoad,
		onUnload,
		onHide
	} from '@dcloudio/uni-app'
	import {
		updateAssetCheck
	} from "@/common/api/assetCheckAPI.ts";

	const safeTop = ref(uni.getSystemInfoSync().safeArea.top)
	const checkData = ref([])
	const resultData = ref([])
	const assetCheck = ref(uni.getStorageSync('assetCheckName'))
	const messageTip = ref()
	const timer = ref()
	// const thisApp = getCurrentPages()
	// thisApp.forEach(item=>{
	// 	console.log(item);
	// })
	uni.getStorage({
		key: 'checkData',
		success: function(res) {
			checkData.value = res.data
		}
	})
	onLoad(param => {
		if (param.flag) {
			timer.value = setTimeout(() => {
				uni.redirectTo({
					url:'/pages/qrCode/qrCode?tip=结束扫码盘点&successUrl=/pages/checkAssets/checkResult/index&clickTipUrl=/pages/checkAssets/checkResult/index'
				})
			}, 1000)
		}
		param.scanData && uni.setStorageSync('resultData', [JSON.parse(param.scanData), ...uni.getStorageSync(
			'resultData')])
		resultData.value = uni.getStorageSync('resultData')
		resultData.value.forEach(item => {
			item.checked = true
		})

	})
	onUnload(()=>{
		clearTimeout(timer.value)
	})
	onHide(()=>{
		clearTimeout(timer.value)
	})

	const checkboxChange = (e: any) => {
		resultData.value.forEach((item, index) => {
			e.detail.value.includes(index) ? item.checked = true : item.checked = false
		})
	}
	const toJump = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const toDel = (idx) => {
		messageTip.value.openTip() //打开弹窗
	}
	const handleShowOrHideTip = (type:string)=>{
			if(type=='yes'){
				resultData.value.splice(idx, 1)
			}
		}
	// 提交结果
	const submitBtn = () => {
		resultData.value = resultData.value.filter(item => {
			item.checkType = 1
			return item.checked === true
		})
		updateAssetCheck({
			checkStoreId: assetCheck.value.checkStoreId,
			executeAssets: resultData.value,
			version: assetCheck.value.version
		}).then((res: any) => {
			if (res.code == 0) {
				clearTimeout(timer.value)
				uni.redirectTo({
					url: `/pages/checkAssets/checkDetail/index?checkStoreId=${assetCheck.value.checkStoreId}&version=${assetCheck.value.version}`
				})
			} else {
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			}
		})
	}
	const goBack = ()=>{
		let params = uni.getStorageSync('checkDetailParams')
		uni.redirectTo({
			url:`/pages/checkAssets/checkDetail/index?checkStoreId=${params.checkStoreId}&version=${params.version}`
		})
	}
</script>
<style scoped lang="scss">
	.check-result {
		background-color: #eee;

		.content {
			padding: 200rpx 30rpx 20rpx 30rpx;
			.right-icon {
				height: calc(100% - 20rpx);
				background-color: #dc143c;
				color: #fff;
				padding: 50rpx 20px;
				box-sizing: border-box;
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			.card {
				box-sizing: border-box;
				width: 100%;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;

				// &:last-child {
				// 	margin-bottom: 120rpx;
				// }

				.head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #f7f7f7;
					padding-bottom: 20rpx;

					text {
						&:last-child {
							font-size: 12px;
							background-color: #6898f3;
							color: #fff;
							padding: 8rpx 40rpx;
							border-radius: 24rpx 0 0 24rpx;
							margin-right: -20rpx;
						}
					}
				}

				.list {
					padding-top: 20rpx;
					display: flex;
					align-items: center;
					font-size: 14px;
				}
			}
		}

		:deep(.uni-swipe_button-text) {
			padding-top: 20rpx;

			&:before {
				content: "\e8b6";
				font-family: 'iconfont';
				position: absolute;
				top: -1rpx;
				left: 50%;
				transform: translateX(-50%);
				margin-top: 10rpx;
			}
		}

		.bottom-btn {
			display: flex;

			uni-button {
				color: #fff;
				border-radius: 46rpx;
				font-size: 14px;
				padding: 0 60rpx;

				&:first-child {
					background-color: #f7a134;
				}

				&:last-child {
					background-color: #008d6a;
				}
			}
		}
	}
</style>
